Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>galería</title>
</head>
<body>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html, body {
    height: 100%;
    background: #eee;
}

body {
    overflow: hidden;
}

.scroll-animations-example {
    > .scrollsection {
        padding: 10vh 10vh 10vh 10vmax;
        min-width: 550vh;
    }
  
    > .scrollsection > .item {
        display: inline-block;
        position: relative;
        margin: 0 -30vh 0 3vh;
    }

> .scrollsection > .item::before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

> .scrollsection > .item.-big {
        height: 80vh;
        width: 60vh;
    }

> .scrollsection > .item.-big.-horizontal {
        height: 60vh;
        width: 80vh;
    }

> .scrollsection > .item.-normal {
        height: 60vh;
        width: 45vh;
        z-index: 1;
    }

> .scrollsection > .item.-normal.-horizontal {
        height: 45vh;
        width: 60vh;
    }

> .scrollsection > .item.-normal:nth-of-type(3n) {
        bottom: 5vh;
    }

> .scrollsection > .item.-normal:nth-of-type(4n) {
        bottom: -5vh;
    }

> .scrollsection > .item.-small {
        height: 40vh;
        width: 30vh;
        z-index: 2;
    }

> .scrollsection > .item.-small.-horizontal {
        height: 30vh;
        width: 40vh;
    }

> .scrollsection > .item.-small:nth-of-type(3n) {
        bottom: 13vh;
    }

> .scrollsection > .item.-small:nth-of-type(4n) {
        bottom: -13vh;
    }

> .scrollsection > .item > .image {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        filter: grayscale(1);
        opacity: 0;
        pointer-events: none;
        transform: translateX(0) translateY(0) scale(1);
        transition: filter .3s ease,
            opacity 1s ease,
            transform 1s ease;
    }

> .scrollsection > .item:nth-of-type(4n) > .image {
        transform: translateX(-30vh) translateY(-30vh) scale(.8);
        transition-delay: 0;
    }

> .scrollsection > .item:nth-of-type(4n - 1) > .image {
        transform: translateX(30vh) translateY(30vh) scale(.8);
        transition-delay: .05s;
    }

> .scrollsection > .item:nth-of-type(4n - 2) > .image {
        transform: translateX(-30vh) translateY(30vh) scale(.8);
        transition-delay: .1s;
    }

> .scrollsection > .item:nth-of-type(4n - 3) > .image {
        transform: translateX(-30vh) translateY(-30vh) scale(.8);
        transition-delay: .15s;
    }

> .scrollsection > .item > .image.-active {
        transform: translateX(0) translateY(0) scale(1);
        opacity: .8;
        pointer-events: auto;
        transition: filter .3s ease,
            opacity 1s ease,
            transform 1s ease;
    }

> .scrollsection > .item > .image.-clicked {
        transform: translateX(0) translateY(0) scale(5);
        opacity: 0;
        pointer-events: auto;
        transition: filter .3s ease,
            opacity 1s ease,
            transform 1s ease;
    }

> .scrollsection > .item > .image.-active:hover {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        filter: grayscale(0);
        opacity: 1;
        cursor: pointer;
    }
}

.fake-ui {
    font-size: 0;
    
    > .logo {
        position: fixed;
        top: 2vh;
        left: 2vh;
        height: 3vh;
        width: 2.5vh;
        border: solid 1vh #999;
    }

> .nav {
        position: fixed;
        top: 2vh;
        right: 2vh;
    }

> .nav > .item {
        background: #999;
        display: inline-block;
        height: 2vh;
        width: 10vh;
        margin-left: 2vh;
    }

> .footer {
        position: fixed;
        bottom: 3vh;
        left: 50%;
        transform: translateX(-50%);
        height: 2vh;
        width: 40vh;
        background: #999;
    }
}

console.log("Event Fired")
class Example {
    constructor(options) {
        this.root = options.root;

this.init();

setTimeout(this.showImages.bind(this), 1000);
    }

init() {
        this.scroll = new LocomotiveScroll({
            el: this.root,
            direction: 'horizontal',
            smooth: true,
            lerp: 0.05,
            tablet: {
                smooth: true
            },
            smartphone: {
                smooth: true
            }
        });

this.images = this.root.querySelectorAll('.image');

[].forEach.call(this.images, (image) => {
            image.addEventListener('click', () => {
                image.classList.add('-clicked');
                this.hideImages();
            });
        });
    }

showImages() {
        [].forEach.call(this.images, (image) => {
            image.classList.remove('-clicked');
            image.classList.add('-active');
        });
    }

hideImages() {
        [].forEach.call(this.images, (image) => {
            image.classList.remove('-active');
        });

setTimeout(this.showImages.bind(this), 2000);
    }
}

window.addEventListener('DOMContentLoaded', (event) => {
    const example = new Example({
        root: document.querySelector('.scroll-animations-example')
    });
});

Frontend Forever App